<template>
  <view class="mine-container">
    <!-- 顶部用户信息区域 -->
    <view class="user-info-section">
      <view class="user-info">
        <image class="avatar" src="/static/tabbar/商家默认头像.png" mode="aspectFill"></image>
        <view class="user-details">
          <text class="shop-name">川味小馆</text>
          <text class="shop-type">餐饮商户</text>
        </view>
      </view>
      <view class="shop-stats">
        <view class="stat-item">
          <text class="stat-value">{{ todayStats.totalOrders }}</text>
          <text class="stat-label">今日订单</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">¥{{ todayStats.totalIncome }}</text>
          <text class="stat-label">今日收入</text>
        </view>
      </view>
    </view>

    <!-- 功能菜单区域 -->
    <view class="menu-section">
      <!-- 店铺管理 -->
      <view class="menu-group">
        <view class="group-title">店铺管理</view>
        <view class="menu-grid">
          <view class="menu-item" @click="navigateTo('/src/pages/mine/settings')">
            <image class="menu-icon" src="https://rsl-plus.oss-rg-china-mainland.aliyuncs.com/店铺设置.png"></image>
            <text class="menu-text">店铺设置</text>
          </view>
          <view class="menu-item" @click="navigateTo('/src/pages/mine/menu')">
            <image class="menu-icon" src="https://rsl-plus.oss-rg-china-mainland.aliyuncs.com/菜品管理.png"></image>
            <text class="menu-text">菜品管理</text>
          </view>
          <view class="menu-item" @click="navigateTo('/src/pages/mine/category')">
            <image class="menu-icon" src="https://rsl-plus.oss-rg-china-mainland.aliyuncs.com/分类管理.png"></image>
            <text class="menu-text">分类管理</text>
          </view>
          <view class="menu-item" @click="navigateTo('/src/pages/mine/activity')">
            <image class="menu-icon" src="https://rsl-plus.oss-rg-china-mainland.aliyuncs.com/优惠管理.png"></image>
            <text class="menu-text">优惠管理</text>
          </view>
        </view>
      </view>

      <!-- 订单管理 -->
      <view class="menu-group">
        <view class="group-title">订单管理</view>
        <view class="menu-grid">
          <view class="menu-item" @click="navigateTo('/src/pages/mine/today')">
            <image class="menu-icon" src="https://rsl-plus.oss-rg-china-mainland.aliyuncs.com/今日订单.png"></image>
            <text class="menu-text">今日订单</text>
          </view>
          <view class="menu-item" @click="navigateTo('/src/pages/mine/history')">
            <image class="menu-icon" src="https://rsl-plus.oss-rg-china-mainland.aliyuncs.com/历史订单.png"></image>
            <text class="menu-text">历史订单</text>
          </view>
          <view class="menu-item" @click="navigateTo('/src/pages/mine/refund')">
            <image class="menu-icon" src="https://rsl-plus.oss-rg-china-mainland.aliyuncs.com/退款管理.png"></image>
            <text class="menu-text">退款管理</text>
          </view>
          <view class="menu-item" @click="navigateTo('/src/pages/mine/statistics')">
            <image class="menu-icon" src="https://rsl-plus.oss-rg-china-mainland.aliyuncs.com/订单统计.png"></image>
            <text class="menu-text">订单统计</text>
          </view>
        </view>
      </view>

      <!-- 其他功能 -->
      <view class="menu-group">
        <view class="group-title">其他功能</view>
        <view class="menu-list">
          <view class="list-item" @click="navigateTo('/src/pages/merchant/about')">
            <text class="item-text">关于我们</text>
            <text class="item-arrow">></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-section">
      <button class="logout-button" @click="handleLogout">退出登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { orderApi } from '../../utils/api'

const todayStats = ref({
  totalOrders: 0,
  totalIncome: 0
})

const processOrderData = (orderItemDTOs) => {
  if (!orderItemDTOs || orderItemDTOs.length === 0) {
    todayStats.value.totalOrders = 0
    todayStats.value.totalIncome = 0
    return
  }
  // 按订单ID分组
  const orderMap = new Map()
  orderItemDTOs.forEach(dto => {
    const orderId = dto.customerOrder.orderId
    if (!orderMap.has(orderId)) {
      orderMap.set(orderId, {
        id: orderId,
        status: dto.customerOrder.orderStatus,
        totalPrice: dto.customerOrder.payableAmount || 0
      })
    }
  })
  // 统计
  const ordersArr = Array.from(orderMap.values())
  todayStats.value.totalOrders = ordersArr.length
  todayStats.value.totalIncome = ordersArr
    .filter(order => order.status === 'PAID' || order.status === 'COMPLETED')
    .reduce((sum, order) => sum + order.totalPrice, 0)
}

const fetchTodayStats = async () => {
  try {
    const today = new Date()
    const year = today.getFullYear()
    const month = String(today.getMonth() + 1).padStart(2, '0')
    const day = String(today.getDate()).padStart(2, '0')
    const dateStr = `${year}-${month}-${day}`
    const response = await orderApi.getOrdersByDate(dateStr)
    if (response.code === 200) {
      processOrderData(response.data)
    } else {
      todayStats.value.totalOrders = 0
      todayStats.value.totalIncome = 0
    }
  } catch (e) {
    todayStats.value.totalOrders = 0
    todayStats.value.totalIncome = 0
  }
}

const navigateTo = (url) => {
  uni.navigateTo({ url })
}

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        uni.clearStorageSync()
        uni.reLaunch({ url: '/src/pages/login/index' })
      }
    }
  })
}

onShow(() => {
  fetchTodayStats()
})
</script>

<style>
.mine-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

.user-info-section {
  background-color: #C70209;
  padding: 40rpx 30rpx;
  color: #ffffff;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 20rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.user-details {
  flex: 1;
}

.shop-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.shop-type {
  font-size: 26rpx;
  opacity: 0.9;
}

.shop-stats {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 6rpx;
}

.stat-label {
  font-size: 24rpx;
  opacity: 0.9;
}

.menu-section {
  padding: 20rpx;
}

.menu-group {
  background-color: #ffffff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
}

.group-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 20rpx;
  padding-left: 10rpx;
  border-left: 4rpx solid #C70209;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.menu-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.menu-text {
  font-size: 24rpx;
  color: #666;
}

.menu-list {
  background-color: #ffffff;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.list-item:last-child {
  border-bottom: none;
}

.item-text {
  font-size: 28rpx;
  color: #333;
}

.item-arrow {
  color: #999;
  font-size: 28rpx;
}

.logout-section {
  padding: 40rpx 30rpx;
}

.logout-button {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: #ffffff;
  color: #C70209;
  font-size: 32rpx;
  border-radius: 44rpx;
  border: none;
}
</style> 